<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>月卡管理</span>
      </div>
      <div>
        <span class="c1">月卡状态:</span
        ><el-input
          class="c2"
          v-model="carInfo.cwl"
          placeholder="请输入内容"
          clearable
        ></el-input>
        <span class="c1">月卡编号:</span
        ><el-input
          class="c2"
          v-model="carInfo.cwl"
          placeholder="请输入内容"
          clearable
        ></el-input>
        <el-button
          style="float: right; padding: 5px 0"
          type="text"
          @click="mh()"
          >重置</el-button
        >
        <el-button
          style="float: right; padding: 5px 0"
          type="text"
          @click="getAllinfoBypage()"
          class="b1"
          >查询</el-button
        >
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>月卡列表</span>
        <div class="e2">
          <el-button
            type="text"
            style="margin-right: 10px"
            @click="add(), (dialogFormVisible1 = true)"
            >新建</el-button
          >
          <el-button type="text" style="margin-right: 10px">批量操作</el-button>
        </div>
      </div>

      <div>
        <el-table
          ref="multipleTable"
          @current-change="handleCurrentChange"
          :data="pageinfo"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column prop="serialNumber" label="月卡编号" width="120">
          </el-table-column>
          <el-table-column prop="effectiveTime" label="办理时间" width="180">
          </el-table-column>
          <el-table-column prop="cardName" label="业主" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="vehicleNumber"
            label="绑定车牌"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="maturityTime"
            label="月卡到期时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="transactor"
            label="办理人"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="state" label="月卡状态" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="updateinfo(scope.row), (dialogFormVisible = true)"
                >编辑</el-button
              >
              <el-button type="text" @click="deleteInfo(scope.row.cardId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="carInfo.pageNum"
          :page-size="carInfo.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="carInfo.totalSize"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="月卡管理/基础信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="月卡编号" :label-width="formLabelWidth">
          <el-input v-model="form.serialNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="持卡人姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.cardName"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="绑定车牌号" :label-width="formLabelWidth">
          <el-input
            v-model="form.vehicleNumber"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="办理人" :label-width="formLabelWidth">
          <el-input
            v-model="form.transactor"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="月卡状态" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block" style="margin-left: 50px">
          <span class="demonstration">生效时间</span>
          <el-date-picker
            v-model="form.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="margin-left: 15px; margin-bottom: 20px"
          >
          </el-date-picker>
        </div>
        <div class="block" style="margin-left: 50px">
          <span class="demonstration">到期时间</span>
          <el-date-picker
            v-model="form.maturityTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="margin-left: 15px; margin-bottom: 20px"
          >
          </el-date-picker>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="repairupdate()">提 交</el-button>
        <el-button @click="dialogFormVisible = false">返 回</el-button>
      </div>
    </el-dialog>
    <el-dialog title="月卡管理/新建信息" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="月卡编号" :label-width="formLabelWidth">
          <el-input v-model="form.serialNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="持卡人姓名" :label-width="formLabelWidth">
          <el-input v-model="form.cardName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="绑定车牌号" :label-width="formLabelWidth">
          <el-input v-model="form.vehicleNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="办理人" :label-width="formLabelWidth">
          <el-input v-model="form.transactor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="月卡状态" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block" style="margin-left: 50px">
          <span class="demonstration">生效时间</span>
          <el-date-picker
            v-model="form.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="margin-left: 15px; margin-bottom: 20px"
          >
          </el-date-picker>
        </div>
        <div class="block" style="margin-left: 50px">
          <span class="demonstration">到期时间</span>
          <el-date-picker
            v-model="form.maturityTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="margin-left: 15px; margin-bottom: 20px"
          >
          </el-date-picker>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="repairAdd()">提 交</el-button>
        <el-button @click="dialogFormVisible1 = false">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CW",
  data() {
    return {
      value1: "",
      cwl: "",

      communityList: {
        communityId: undefined,
        communityName: undefined,
      },
      XQinfoList: [],
      dialogFormVisible1: false,
      dialogFormVisible: false,
      form: {
        cardId: "",
        serialNumber: "",
        effectiveTime: "",
        maturityTime: "",
        state: "",
        vehicleNumber: "",
        cardName: "",
        transactor: "",
      },
      formLabelWidth: "120px",
      pageinfo: {},
      carInfo: {
        cardId: "",
        serialNumber: "",
        effectiveTime: "",
        maturityTime: "",
        state: "",
        vehicleNumber: "",
        cardName: "",
        transactor: "",
        cwl: "",
        pageRequest: {
          pageNum: undefined,
          pageSize: undefined,
        },
      },
    };
  },
  methods: {
    mh() {
      location.reload();
    },
    updateinfo(data) {
      this.form.cardId = data.cardId;
      this.form.serialNumber = data.serialNumber;
      this.form.cardName = data.cardName;
      this.form.vehicleNumber = data.vehicleNumber;
      this.form.transactor = data.transactor;
      this.form.state = data.state;
      this.form.maturityTime = data.maturityTime;
      this.form.effectiveTime = data.effectiveTime;
    },
    repairupdate() {
      this.$axios
        .post("/carshop/month-card/updateYkinfo", this.form)
        .then((res) => {
          this.getAllinfoBypage();
          this.dialogFormVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        })
        .catch((e) => {
          this.$message.error("修改失败");
        });
    },
    handleCurrentChange(val) {
      this.getAllinfoBypage(val);
      console.log(val);
    },
    toadd() {
      this.$router.push({ path: "/addQyinfo" });
    },
    add() {
      this.form.serialNumber = "";
      this.form.cardName = "";
      this.form.vehicleNumber = "";
      this.form.transactor = "";
      this.form.effectiveTime = "";
      this.form.maturityTime = "";
      this.form.state = "";
    },
    repairAdd() {
      this.$axios
        .post("/carshop/month-card/addYkInfo", {
          serialNumber: this.form.serialNumber,
          cardName: this.form.cardName,
          vehicleNumber: this.form.vehicleNumber,
          transactor: this.form.transactor,
          maturityTime: this.form.maturityTime,
          effectiveTime: this.form.effectiveTime,
          state: this.form.state,
        })
        .then((res) => {
          this.getAllinfoBypage();
          this.dialogFormVisible1 = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        })
        .catch((e) => {
          this.$message.error("添加失败");
        });
    },
    deleteInfo(cardId) {
      this.$confirm("此操作将永久删除用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/carshop/month-card/delYkInfo", {
              params: {
                cardId: cardId,
              },
            })
            .then((response) => {
              this.getAllinfoBypage();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((e) => {});
        })
        .catch((e) => {});
    },
    getAllinfoBypage(pageNum, pageSize) {
      if (pageNum == null || pageNum == undefined) {
        pageNum = 1;
      }
      if (pageSize == undefined || pageSize == null) {
        pageSize = 7;
      }
      this.carInfo.pageRequest.pageNum = pageNum;
      this.carInfo.pageRequest.pageSize = pageSize;
      const config = {
        headers: {
          "content-type": "application/json", // 设置完以后 传入的params对象就会时候用formdata传参的方式
        },
      };
      const formData = JSON.stringify(this.carInfo);
      this.$axios
        .post("/carshop/month-card/selectPcInfo", formData, config, {
          params: {
            cwl: this.cwl,
          },
        })
        .then((res) => {
          if (res.data.code == 20000) {
            console.log("-------");
            // console.log(res.data.data.data);
            this.pageinfo = res.data.data.data.content;
            console.log(this.pageinfo);
          }
        });
    },
  },
  mounted() {
    this.getAllinfoBypage();
    this.selectXQ();
  },
};
</script>

<style scoped>
s .e2 {
  float: right;
  margin-bottom: 20px;
}
.e1 {
  margin-top: 10px;
}
.b1 {
  margin-right: 20px;
}
.box-card {
  margin-top: 20px;
}
.c1 {
  float: left;
  margin-top: 10px;
}
.c2 {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  margin-left: 20px;
}
</style>